
import * as React from "react";
import { Text, View, ScrollView } from '@tarojs/components'
import { ScrollViewProps } from '@tarojs/components/types/ScrollView'
export enum RefreshState {
    Idle = 'Idle',
    HeaderRefreshing = 'HeaderRefreshing',
    FooterRefreshing = 'FooterRefreshing',
    NoMoreData = 'NoMoreData',
    Failure = 'Failure',
    EmptyData = 'EmptyData',
    None = 'None',
}

const RefreshText = {
    HeaderRefreshing: '上拉刷新，正在加载..',
    FooterRefreshing: '下拉加载，正在加载..',
    Failure: '服务器正在出小差，点击重新加载～',
    NoMoreData: '已经全部加载完毕',
    EmptyData: '暂无数据～',
    Idle: `LOADING～`,
}

type Prop = {
    refreshState: RefreshState;
    onHeaderRefresh: Function;
    onFooterRefresh: (info: any) => void;
    onEmptyRefresh();
    reload();
    children: React.ReactNode,
    containerStyle: React.CSSProperties
}

export default (props: Partial<Prop> & ScrollViewProps) => {
    const {
        refreshState,
        onHeaderRefresh,
        onFooterRefresh,
        onEmptyRefresh,
        reload,
        children,
        ...rest
    } = props || {}

    const [state, dispatch] = React.useReducer((state, action) => ({ ...state, ...action }), {
        refresherTriggered: false,
    })

    let ListHeaderComponent = React.useMemo(() => {
        switch (refreshState) {
            case RefreshState.HeaderRefreshing:
                return (
                    <View style={styles.header}>
                        <Text style={styles.refreshText}>{RefreshText.HeaderRefreshing}</Text>
                    </View>
                )
            default:
                return <View />
        }
    }, [refreshState])

    let ListFooterComponent = React.useMemo(() => {
        switch (refreshState) {
            case RefreshState.Idle: {
                return (
                    <View style={styles.footer}>
                        <Text style={styles.refreshText}>{RefreshText.Idle}</Text>
                    </View>
                )
            }
            case RefreshState.FooterRefreshing:
                return (
                    <View style={styles.footer}>
                        <Text style={styles.refreshText}>{RefreshText.FooterRefreshing}</Text>
                    </View>
                )
            case RefreshState.NoMoreData:
                return (
                    <View style={styles.footer}>
                        <Text style={styles.refreshText}>{RefreshText.NoMoreData}</Text>
                    </View>
                )
            case RefreshState.Failure:
                return (
                    <View style={styles.footer} onClick={e => {
                        e.stopPropagation()
                        reload && reload()
                    }}>
                        <Text style={styles.refreshText}>{RefreshText.Failure}</Text>
                    </View>
                )
            case RefreshState.EmptyData:
                if (onEmptyRefresh)
                    return onEmptyRefresh()
                return (
                    <View style={styles.footer} onClick={e => {
                        e.stopPropagation()
                        reload && reload()
                    }}>
                        <Text style={styles.refreshText}>{RefreshText.EmptyData}</Text>
                    </View>
                )
            default:
                return <View />
        }
    }, [refreshState])


    return (
        <View style={{ display: 'flex', flex: 1, overflow: 'hidden',...rest.style as React.CSSProperties }}>
            <ScrollView
                style={{ flex: 1 }}
                enableFlex
                scrollY
                enhanced
                bounces
                showScrollbar={false}
                // pagingEnabled
                /**刷新*/
                refresherDefaultStyle='black'
                refresherEnabled
                refresherBackground='white'
                {...rest}
                refresherTriggered={state.refresherTriggered}
                onRefresherRefresh={async (event) => {
                    if (refreshState == RefreshState.HeaderRefreshing) return
                    if (refreshState == RefreshState.FooterRefreshing) return
                    dispatch({
                        refresherTriggered: true,
                    })
                    Wait().then(() => {
                        dispatch({
                            refresherTriggered: false,
                        })
                    })
                    await Wait()
                    onHeaderRefresh && onHeaderRefresh(RefreshState.HeaderRefreshing)
                }}
                onScrollToLower={event => {
                    // console.log('onScrollToLower', refreshState)
                    if (refreshState == RefreshState.Idle) {
                        onFooterRefresh && onFooterRefresh(refreshState)
                    }
                }}

            >
                {ListHeaderComponent}
                <View style={{ display: 'flex', flexDirection: 'column', ...props.containerStyle }}>{children}</View>
                {ListFooterComponent}
            </ScrollView>
        </View>

    )
}



const styles: { [key: string]: React.CSSProperties } = {
    header: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '44px',
    },
    footer: {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '44px',
    },
    refreshText: {
        fontSize: '12px',
        color: '#DAD7DA',
    }
}




const Wait = (timeout = 350) => {
    return new Promise(resolve => {
        setTimeout(resolve, timeout);
    });
}
